<template>
	<view class="page">
		<u-gap height="30"></u-gap>
		<view class="bannerVue relative margin0">
			<!-- <image src="../../static/lol.jpg"></image> -->
			<text class="absolute" style="left: 30rpx; bottom: 70rpx; color: #fff; font-weight: 600; font-size: 32rpx;">AI轻创业联盟</text>
			<text class="absolute" style="left: 30rpx; bottom: 30rpx; color: #fff;font-size: 26rpx;">开启AI创业新时代</text>
			<view class="more">了解更多</view>
		</view>
		
		<view class="showVue margin30 flex-between flex-wrap">
			<view class="li flex-column align-center flex-between padding-column30">
				<image src="../../static/entrepreneurship/what.png" style="width: 46rpx; height: 46rpx;"></image>
				<text style="font-weight: 600; font-size: 30rpx; color: #333;">什么是AI轻创业</text>
				<text style="color: #18AB4E; font-size: 26rpx; font-weight: 600;">了解AI轻创业</text>
			</view>
			<view class="li flex-column align-center flex-between padding-column30">
				<image src="../../static/entrepreneurship/play.png" style="width: 48rpx; height: 48rpx;"></image>
				<text style="font-weight: 600; font-size: 30rpx; color: #333;">如何开启AI轻创业</text>
				<text style="color: #18AB4E; font-size: 26rpx; font-weight: 600;">开启A创业之旅</text>
			</view>
			<view class="li flex-column align-center flex-between padding-column30">
				<image src="../../static/entrepreneurship/coo.png" style="width: 48rpx; height: 48rpx;"></image>
				<text style="font-weight: 600; font-size: 30rpx; color: #333;">我是项目方如何...</text>
				<text style="color: #18AB4E; font-size: 26rpx; font-weight: 600;">合作共赢</text>
			</view>
			<view class="li flex-column align-center flex-between padding-column30">
				<image src="../../static/entrepreneurship/enter.png" style="width: 46rpx; height: 46rpx;"></image>
				<text style="font-weight: 600; font-size: 30rpx; color: #333;">项目入口</text>
				<text style="color: #18AB4E; font-size: 26rpx; font-weight: 600;">项目介绍</text>
			</view>
		</view>
		
		<view class="item margin30" v-for="(item, index) in 1" :key="index">
			<view class="top">
				<!-- <image src="../../static/case.jpg"></image> -->
			</view>
			<view class="bot padding30 flex-column flex-between">
				<view class="name">千里达</view>
				<view class="descri line-1">千里达骑行运动装备, 全面保护, 让你在骑行中无后顾之忧!</view>
				<view class="btn">了解更多</view>
			</view>
		</view>
		<u-gap height="30"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.bannerVue {
		width: 690rpx;
		height: 360rpx;
		background: #f5f5f5;
		border-radius: 12rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
		.more {
			width: 160rpx;
			height: 66rpx;
			background: #fff;
			line-height: 66rpx;
			text-align: center;
			color: #18AB4E;
			font-weight: 600;
			position: absolute;
			bottom: 30rpx;
			right: 20rpx;
			border-radius: 33rpx;
			font-size: 24rpx;
		}
	}
	
	.showVue {
		width: 690rpx;
		.li {
			width: 330rpx;
			height: 200rpx;
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}
		.li:nth-child(3),.li:nth-child(4) {
			margin-bottom: 0;
		}
	}
	
	.item {
		width: 690rpx;
		height: 520rpx;
		background: #fff;
		border-radius: 12rpx;
		.top {
			width: 100%;
			height: 290rpx;
			background: #EBF3FD;
			image {
				width: 100%;
				height: 290rpx;
				border-radius: 12rpx 12rpx 0 0;
			}
		}
		.bot {
			width: 100%;
			height: 230rpx;
			.name {
				font-weight: 600;
				font-size: 30rpx;
				color: #000;
				line-height: 1;
			}
			.descri {
				color: #888;
				font-size: 26rpx;
				line-height: 1;
			}
			.btn {
				width: 160rpx;
				height: 58rpx;
				line-height: 60rpx;
				text-align: center;
				color: #fff;
				border-radius: 33rpx;
				background: #18AB4E;
				font-size: 24rpx;
			}
		}
	}
</style>
